<template>
  <a-button @click="state.open = true"><bulb-outlined/>单位设置</a-button>
  <a-drawer title="单位管理" v-model:open="state.open" :body-style="{paddingTop:'10px'}">
    <template #extra>
      <span @click="switchModel">
        <a-button type="primary" v-if="!store.createMode"><plus-outlined/>新建</a-button>
        <a-button v-else><left-outlined/>返回</a-button>
      </span>
    </template>
    <template v-if="store.createMode">
      <a-form layout="vertical" ref="formRef" :model="unitForm" name="unitForm">
        <a-form-item label="单位名称"
                     name="name"
                     help="多个单位用英文逗号隔开，如米,平米,厘米"
                     :rules="{required:true,message:'单位名称不能为空'}">
          <a-textarea v-model:value="unitForm.name"/>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary"
                      html-type="submit"
                      :loading="state.loading"
                      @click="onSubmit">提交</a-button>
            <a-button @click="onRestForm">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </template>
    <template v-else>
      <a-list :data-source="store.data" :pagination="simplePageConfig">
        <template #renderItem="{item,index}">
          <a-list-item :style="{paddingLeft:0,paddingRight:0}">
            <template v-if="store.editorIndex === index">
              <a-space>
                <a-input v-model:value="item.name"/>
                <span class="hover" @click="confirmEditor(item)"><check-outlined/></span>
              </a-space>
            </template>
            <template v-else>{{ item.name }}</template>
            <template #actions>
              <div :style="{height: '32px'}" class="flex flex-items-center">
                <a-space>
                  <template #split>
                    <a-divider type="vertical"/>
                  </template>
                  <span class="hover" @click="callEditor(index)">
                    <edit-outlined v-if="store.editorIndex !== index"/>
                    <close-outlined v-else/>
                  </span>
                  <a-popconfirm title="分类删除确认，此操作不可逆，请谨慎操作！"
                                placement="left"
                                @confirm="onDelete(item.id,index)">
                  <span class="hover hover-danger">
                    <delete-outlined/>
                  </span>
                  </a-popconfirm>
                </a-space>
              </div>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </template>

  </a-drawer>
</template>
<script setup lang="ts">
import {
  BulbOutlined,
  PlusOutlined,
  LeftOutlined,
  EditOutlined,
  CloseOutlined,
  DeleteOutlined, CheckOutlined
} from "@ant-design/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {useUnitsStore} from "@/store/units";
import {FormInstance} from "ant-design-vue";
import {simplePageConfig} from "@/config";

const store = useUnitsStore()

let unitForm = reactive<{name:string}>({name: ''})
const formRef = ref<FormInstance>()

const state = reactive({
  open: false,
  datasource: <RelationItem[]>[],
  loading: false
})
const getUnitsList = async ()=>{
  await store.getUnits()
}
const switchModel = ()=>{
  store.$patch({createMode: !store.createMode})
}
onMounted(()=>{
  getUnitsList()
})

const onSubmit = ()=>{
  formRef.value
      ?.validate()
      .then(async () => {
        state.loading = true
        setTimeout(() => { state.loading = false},2000)
        await store.createUnit(unitForm)
      }).catch(() => {})
}
const onRestForm = ()=>{
  formRef.value?.resetFields()
  switchModel()
}
//编辑删除操作
const callEditor = (index:number)=>{
  store.$patch({editorIndex: store.editorIndex === index ? -1 :index})
}
const confirmEditor = (item:RelationItem)=>{
  store.updateUnit(item.id,{name:item.name})
}
const onDelete = (id:number)=>{
  store.deleteUnit(id)
}
</script>

<style scoped>
  .unit-title {
    margin-bottom: 10px;
    background-color: #fafafa;
    padding: 4px 12px;
  }
</style>